<template>
  <div class="card">
    <div class="card-title">
      <el-icon><data-analysis /></el-icon>
      信号数据概览
      <el-tag v-if="computing" type="warning" size="small" style="margin-left: 10px;">
        计算中... {{ computedCount }}/{{ totalSignals }}
      </el-tag>
    </div>

    <div class="stats-container">
      <div class="stat-card">
        <div class="stat-value">{{ stats.totalCount }}</div>
        <div class="stat-label">总信号数量</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ stats.uniqueSIDs }}</div>
        <div class="stat-label">信号源数量</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ stats.maxFrequency.toFixed(2) }}</div>
        <div class="stat-label">最高频率 (MHz)</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ stats.minDOA.toFixed(2) }}° - {{ stats.maxDOA.toFixed(2) }}°</div>
        <div class="stat-label">DOA范围</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">{{ stats.timeRange }}</div>
        <div class="stat-label">时间范围</div>
      </div>
    </div>

    <div class="filters" style="margin-top: 25px;">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-slider v-model="frequencyRange" range :min="0" :max="10000" :step="10" />
          <div style="text-align: center; color: #a0b0ff; font-size: 0.9rem;">频率范围: {{ frequencyRange[0] }} - {{ frequencyRange[1] }} MHz</div>
        </el-col>
        <el-col :span="12">
          <el-slider v-model="doaRange" range :min="0" :max="360" :step="5" />
          <div style="text-align: center; color: #a0b0ff; font-size: 0.9rem;">DOA范围: {{ doaRange[0] }}° - {{ doaRange[1] }}°</div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onUnmounted } from 'vue'
import { DataAnalysis } from '@element-plus/icons-vue'

const props = defineProps({
  signals: {
    type: Array,
    required: true
  }
})

// 计算状态
const computing = ref(false)
const computedCount = ref(0)
const totalSignals = computed(() => props.signals.length)

// 统计数据
const stats = ref({
  totalCount: 0,
  uniqueSIDs: 0,
  maxFrequency: 0,
  minDOA: 0,
  maxDOA: 0,
  minTime: 0,
  maxTime: 0,
  timeRange: '-'
})

// 筛选范围
const frequencyRange = ref([0, 10000])
const doaRange = ref([0, 360])

// 计算定时器
let computeInterval = null

// 初始化统计数据
const initStats = () => {
  stats.value = {
    totalCount: props.signals.length,
    uniqueSIDs: 0,
    maxFrequency: -Infinity,
    minDOA: Infinity,
    maxDOA: -Infinity,
    minTime: Infinity,
    maxTime: -Infinity,
    timeRange: '-'
  }
}
const uniqueSIDs = new Set();
// 分批计算统计数据
const startBatchCompute = () => {
  // 如果数据量小，直接计算
  if (props.signals.length <= 10000) {
    computeAllStats()
    return
  }

  // 初始化状态
  initStats()
  computing.value = true
  computedCount.value = 0

  // 分批计算
  computeInterval = setInterval(() => {
    // console.log('Computing...', computedCount.value, '/', props.signals.length)
    const startIndex = computedCount.value
    const endIndex = Math.min(startIndex + 10000, props.signals.length)

    // 处理当前批次
    for (let i = startIndex; i < endIndex; i++) {
      const signal = props.signals[i]
      uniqueSIDs.add(signal.SID)

      // 唯一SID计数
      if (signal.SID !== undefined) {
        stats.value.uniqueSIDs = uniqueSIDs.size
      }

      // 频率统计
      if (signal.frequency > stats.value.maxFrequency) {
        stats.value.maxFrequency = signal.frequency
      }

      // DOA统计
      if (signal.DOA < stats.value.minDOA) {
        stats.value.minDOA = signal.DOA
      }
      if (signal.DOA > stats.value.maxDOA) {
        stats.value.maxDOA = signal.DOA
      }

      // 时间统计
      if (signal.time < stats.value.minTime) {
        stats.value.minTime = signal.time
      }
      if (signal.time > stats.value.maxTime) {
        stats.value.maxTime = signal.time
      }
    }

    // 更新进度
    computedCount.value = endIndex

    // 更新时间范围显示
    stats.value.timeRange = `${stats.value.minTime.toFixed(4)}s - ${stats.value.maxTime.toFixed(4)}s`

    // 检查是否完成
    if (endIndex >= props.signals.length) {
      clearInterval(computeInterval)
      computing.value = false
    }
  }, 30)
}

// 一次性计算所有统计数据
const computeAllStats = () => {
  if (props.signals.length === 0) {
    stats.value = {
      totalCount: 0,
      uniqueSIDs: 0,
      maxFrequency: 0,
      minDOA: 0,
      maxDOA: 0,
      minTime: 0,
      maxTime: 0,
      timeRange: '-'
    }
    return
  }

  // 初始化变量
  const uniqueSIDs = new Set()
  let maxFrequency = -Infinity
  let minDOA = Infinity
  let maxDOA = -Infinity
  let minTime = Infinity
  let maxTime = -Infinity

  // 单次遍历计算所有统计数据
  for (let i = 0; i < props.signals.length; i++) {
    const signal = props.signals[i]

    // 唯一SID计数
    uniqueSIDs.add(signal.SID)

    // 频率统计
    if (signal.frequency > maxFrequency) {
      maxFrequency = signal.frequency
    }

    // DOA统计
    if (signal.DOA < minDOA) {
      minDOA = signal.DOA
    }
    if (signal.DOA > maxDOA) {
      maxDOA = signal.DOA
    }

    // 时间统计
    if (signal.time < minTime) {
      minTime = signal.time
    }
    if (signal.time > maxTime) {
      maxTime = signal.time
    }
  }

  stats.value = {
    totalCount: props.signals.length,
    uniqueSIDs: uniqueSIDs.size,
    maxFrequency,
    minDOA,
    maxDOA,
    minTime,
    maxTime,
    timeRange: `${minTime.toFixed(4)}s - ${maxTime.toFixed(4)}s`
  }
}

// 监听信号数据变化
watch(() => props.signals, (newSignals) => {
  if (newSignals.length > 10000) {
    startBatchCompute()
  } else {
    computeAllStats()
  }
}, {immediate: true})

// 组件卸载时清除定时器
onUnmounted(() => {
  if (computeInterval) {
    clearInterval(computeInterval)
  }
})
</script>

<style scoped>
.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 25px;
}

.stat-card {
  background: linear-gradient(135deg, rgba(10, 22, 70, 0.7) 0%, rgba(15, 35, 90, 0.5) 100%);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  border: 1px solid rgba(70, 120, 255, 0.2);
}

.stat-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: #4facfe;
  margin: 10px 0;
}

.stat-label {
  color: #a0b0ff;
  font-size: 0.9rem;
}
</style>